<template>
  <view class="wrap">
    <image class="img" :src="info.src" mode="widthFix"></image>
    <view>
      <view class="name">{{ info.name }}</view>
      <view class="tags flex flex-ac-sb">
        <view class="tag" :class="'tag' + item" v-for="(item,i) in tagView" :key="i">{{ tagText[item] }}</view>
      </view>
      <view class="lebal-price flex flex-jc-sb flex-ai-fe">
        <text>指导价: {{ info.lebalPrice }}</text>
        <view v-if= "info.tag.length > 3" class="tag3">巨能降</view>
      </view>
      <view class="price flex flex-jc-sb flex-ai-bl">
        <view>月供{{ info.mounthly }}</view>
        <view class="payment">首付<text class="num">{{ info.downPayment }}</text></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data(){
    return {
      tagText: ['自营', '以租代售', '一成首付', '巨能降']
    }
  },

  props: {
    info: {
      type: Object,
      default(){
        return {
          name: '',
          tag: '',
          lebalPrice: '',
          mounthly: '',
          downPayment: '',
          src: '',
        }
      }
    }
  },

  computed: {
    tagView(){
      let arr = [...this.info.tag]
      if(arr.length > 3){
        arr.pop()
      }
      return arr;
    }
  },

  methods:{
        
  }
}
</script>

<style lang="scss" scoped>
  .wrap {
    box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.12);
    border-radius: 20rpx;
    padding: 49rpx 20rpx 30rpx;
		background-color: #fff;
		margin-top: 30rpx;
    .img {
      width: 298rpx;
      height: 175rpx;
      background: #f00;
    }

    .name {
      font-size: 28rpx;
      font-weight: 500;
      color: #343434;
      max-width: 298rpx;
      margin: 26rpx 0;
    }

    .tags {
      max-width: 298rpx;

      .tag {
        border-radius: 5rpx;
        padding: 4rpx 6rpx;
        margin-right: 8rpx;
        font-size: 20rpx;
        font-weight: bold;
        color: #FFFFFF;

        &:last-child {
          margin-right: 0;
        }
      }

      .tag0 {
        background: #FF4B44;
      }

      .tag1 {
        background: #FFB763;
      }

      .tag2 {
        background: #FFD053;
      }

      .tag3 {
        background: #AFC86B;
      }
    }

    .lebal-price {
      font-size: 22rpx;
      font-weight: 500;
      color: #666666;
      margin-bottom: 5rpx;
      height: 55rpx;

      .tag3 {
        background: #AFC86B;
        border-radius: 5rpx;
        padding: 4rpx 6rpx;
        margin-right: 8rpx;
        font-size: 20rpx;
        font-weight: bold;
        color: #FFFFFF;
      }
    }

    .price {
      font-size: 26rpx;
      font-weight: 500;
      color: #FC4040;

      .payment {
        font-size: 26rpx;

        .num {
          font-size: 32rpx;
        }
      }
    }
  }
</style>